Creating React Components is one of the most important concepts in React JS. Components allow developers to divide a user interface (UI) into small, reusable, and manageable parts. Instead of writing an entire website in one large file, developers can create separate components for headers, navigation bars, buttons, forms, cards, and other UI elements.
Course Link: JustAcademy React JS Training Course
Demo Link: Register for React JS Course Demo
A React component is an independent, reusable piece of a user interface. It is usually written as a JavaScript function that returns JSX, which describes what should appear on the screen.
For example, a website may contain a Header component, Navbar component, ProductCard component, Footer component, and App component. These components can be combined to build a complete application.
function Welcome() {
return <h1>Welcome to React JS!</h1>;
}
export default Welcome;Explanation:
function Welcome() defines a component named Welcome.return specifies the UI that the component displays.export default Welcome allows the component to be imported into another file.React supports function components and class components. Function components are the recommended approach for most new React code.
A function component is a JavaScript function that returns JSX. It can receive props and use Hooks such as useState and useEffect when needed.
function Greeting() {
return <h2>Hello, Student!</h2>;
}
export default Greeting;Arrow functions provide another way to define function components.
const Greeting = () => {
return <h2>Hello, Student!</h2>;
};
export default Greeting;The following shorter syntax is also valid:
const Greeting = () => <h2>Hello, Student!</h2>;
export default Greeting;Class components extend React's Component class and define a render() method. They are still supported, but function components are generally preferred for new code.
import { Component } from 'react';
class Greeting extends Component {
render() {
return <h2>Hello, Student!</h2>;
}
}
export default Greeting;| Feature | Function Component | Class Component |
|---|---|---|
| Definition | JavaScript function | JavaScript class extending Component |
| UI output | Returns JSX | Returns JSX from render() |
| State | Uses Hooks such as useState | Uses this.state and this.setState |
| Lifecycle behavior | Uses Hooks such as useEffect where appropriate | Uses lifecycle methods |
| Recommended for new code | Yes | Generally no |
Header or ProductCard.function Profile() {
return (
<div>
<h2>User Profile</h2>
<p>Welcome to your profile.</p>
</div>
);
}
export default Profile;A React Fragment groups multiple JSX elements without adding an extra DOM element.
function AppTitle() {
return (
<>
<h1>React JS</h1>
<p>Learn to build user interfaces.</p>
</>
);
}Follow these steps to create and use a simple React component.
Create a file named Welcome.jsx inside your project's source directory.
function Welcome() {
return (
<div>
<h1>Welcome to My Website</h1>
<p>This is my first React component.</p>
</div>
);
}
export default Welcome;Import the component into your App.jsx file.
import Welcome from './Welcome.jsx';
function App() {
return (
<main>
<Welcome />
</main>
);
}
export default App;In a typical React application, the entry file mounts the root component into the HTML page.
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>
);Result: The browser displays the heading “Welcome to My Website” and the paragraph “This is my first React component.”
Note: The entry-file setup may differ depending on your React project template or framework.
A reusable component can be used multiple times in an application. For example, a Button component can display different labels while maintaining the same basic structure.
function Button() {
return <button>Click Me</button>;
}
function App() {
return (
<div>
<Button />
<Button />
<Button />
</div>
);
}
export default App;Here, the same Button component is rendered three times. This avoids repeating the button's markup.
Props, short for properties, allow a parent component to pass information to a child component. Props are read-only inputs and should not be modified by the receiving component.
function Greeting(props) {
return <h2>Hello, {props.name}!</h2>;
}
function App() {
return (
<div>
<Greeting name="Aarav" />
<Greeting name="Priya" />
<Greeting name="Rahul" />
</div>
);
}
export default App;Output: Three greetings appear, each using the name passed to the component.
You can extract props directly from the function parameter to make the code cleaner.
function Greeting({ name, city }) {
return (
<p>{name} lives in {city}.</p>
);
}
function App() {
return <Greeting name="Priya" city="Mumbai" />;
}function Greeting({ name = 'Guest' }) {
return <h2>Hello, {name}!</h2>;
}If the caller does not provide a name prop, the component uses “Guest”. The default applies when the value is undefined, not when it is explicitly null.
React applications commonly use a component hierarchy. A parent component renders one or more child components, helping organize the UI into logical sections.
function Header() {
return <header><h1>My Website</h1></header>;
}
function Content() {
return <section><p>Welcome to the website.</p></section>;
}
function Footer() {
return <footer><p>Copyright 2026</p></footer>;
}
function App() {
return (
<div>
<Header />
<Content />
<Footer />
</div>
);
}
export default App;In this example, App is the parent component, while Header, Content, and Footer are child components.
The special children prop allows a component to display content placed between its opening and closing tags. This is useful for layouts, cards, panels, and reusable containers.
function Card({ children }) {
return (
<div className="card">
{children}
</div>
);
}
function App() {
return (
<Card>
<h2>React Learning</h2>
<p>Practice creating reusable components.</p>
</Card>
);
}
export default App;The Card component provides a reusable wrapper, while the parent decides which content to place inside it.
You can style React components using regular CSS files and the className attribute.
import './Welcome.css';
function Welcome() {
return (
<div className="welcome-card">
<h2>Welcome to React</h2>
<p>Build reusable user interfaces.</p>
</div>
);
}
export default Welcome;.welcome-card {
padding: 20px;
margin: 16px;
border: 1px solid #cccccc;
border-radius: 8px;
background-color: #f5f5f5;
}
.welcome-card h2 {
color: #2563eb;
}Important: React uses className in JSX instead of the HTML class attribute.
When displaying multiple items, use JavaScript methods such as map() to render a component for each item. Give each sibling a stable, unique key.
function StudentCard({ name }) {
return <li>{name}</li>;
}
function App() {
const students = [
{ id: 1, name: 'Aarav' },
{ id: 2, name: 'Priya' },
{ id: 3, name: 'Rahul' }
];
return (
<ul>
{students.map((student) => (
<StudentCard key={student.id} name={student.name} />
))}
</ul>
);
}
export default App;The key helps React identify items between renders. It is not automatically passed to the component as a regular prop. If the child needs the ID, pass it separately, for example id={student.id}.
State stores information that can change over time. When state changes through a state setter, React can render the component again to display the updated value.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>
Increase
</button>
</div>
);
}
export default Counter;Explanation:
useState(0) initializes the count to zero.count stores the current state value.setCount updates the state.onClick handles the button click.Hooks such as useState must be called at the top level of a function component or custom Hook, not inside loops, conditions, or nested functions.
Conditional rendering allows a component to display different content depending on a condition.
function LoginMessage({ isLoggedIn }) {
if (isLoggedIn) {
return <h2>Welcome Back!</h2>;
}
return <h2>Please Log In</h2>;
}
function App() {
return (
<div>
<LoginMessage isLoggedIn={true} />
<LoginMessage isLoggedIn={false} />
</div>
);
}The component displays a different message depending on the value of isLoggedIn.
For a larger application, create separate files for components that have distinct responsibilities. This makes code easier to find, maintain, and reuse.
src/
components/
Header.jsx
Footer.jsx
Button.jsx
StudentCard.jsx
App.jsx
main.jsx
index.cssIn Header.jsx:
export function Header() {
return <header><h1>My Application</h1></header>;
}In App.jsx:
import { Header } from './components/Header.jsx';
function App() {
return (
<div>
<Header />
</div>
);
}
export default App;Note: A default export is imported without braces, while a named export is imported using braces. The import path and exported name must match the module.
This example combines reusable components, props, list rendering, and CSS classes to create a simple student list.
function StudentCard({ name, course }) {
return (
<article className="student-card">
<h2>{name}</h2>
<p>Course: {course}</p>
</article>
);
}
function StudentList() {
const students = [
{ id: 1, name: 'Aarav', course: 'React JS' },
{ id: 2, name: 'Priya', course: 'JavaScript' },
{ id: 3, name: 'Rahul', course: 'Web Development' }
];
return (
<section>
<h1>Student List</h1>
{students.map((student) => (
<StudentCard
key={student.id}
name={student.name}
course={student.course}
/>
))}
</section>
);
}
export default function App() {
return (
<main>
<StudentList />
</main>
);
}App is the main component.StudentList stores the sample student data and renders the list.map() creates one StudentCard for each student.StudentCard receives the student's name and course through props.key uniquely identifies each list item among its siblings.| Mistake | Why It Is a Problem | Correct Approach |
|---|---|---|
| Using a lowercase component name | React interprets lowercase JSX tags as built-in HTML elements. | Use names such as Header or Profile. |
| Forgetting to return JSX | The component may render nothing. | Return the intended JSX. |
| Returning multiple adjacent elements without a wrapper | JSX requires a single returned element or Fragment. | Use a parent element or Fragment. |
| Calling a component as a regular function | It bypasses React's normal component rendering behavior. | Render it with JSX, such as |
| Defining a component inside another component | It can create a new component type on each render and cause state or performance problems. | Define components at the module's top level. |
| Modifying props directly | Props are read-only inputs. | Pass new values from the parent or use state for local changing data. |
| Using array indexes as keys in changing lists | Items may be incorrectly matched when order changes. | Prefer stable IDs from the data. |
| Calling Hooks conditionally | It violates the Rules of Hooks. | Call Hooks at the top level of the component. |
| Mixing too many responsibilities into one component | The component becomes difficult to maintain and test. | Split it into logical, reusable components where helpful. |
ProductCard, SearchBar, and Navbar.A React component is a reusable UI building block that describes part of an application's interface.
Define a JavaScript function with a capitalized name and return JSX from it.
Capitalization allows React to distinguish custom components from built-in HTML elements in JSX.
Props are inputs passed to a component, usually by its parent. State is component-managed data that can change and trigger a re-render.
Yes. A component can be rendered in multiple places and configured with different props.
JSX is a JavaScript syntax extension that lets developers describe UI using markup-like syntax inside JavaScript code.
Export makes a component available from a module, while import lets another module use it.
A parent component is a component that renders or contains other components.
The children prop represents content nested between a component's opening and closing tags.
Keys help React identify list items between renders so it can update the UI correctly.
Generally, no. Define component functions at the top level to avoid creating a new component type on each render.
Function components are generally recommended. They support Hooks and are the standard approach in modern React development.
Creating React Components helps developers build user interfaces that are reusable, organized, maintainable, and scalable. By understanding function components, JSX, props, state, component composition, and list rendering, beginners can start building real React applications with confidence.
To learn more, visit the JustAcademy React JS Training Course or register for a React JS course demo.
